<template>
  <div class="edit-container">
    <el-button type="primary" @click="handleClose" style="margin-bottom: 20px;">
      <el-icon><ArrowLeft /></el-icon> 返回
    </el-button>
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px" class="edit-form">
    <el-form-item label="教材名" prop="name">
      <el-input v-model="formData.name" placeholder="请输入教材名"></el-input>
    </el-form-item>
    <el-form-item label="年级" prop="grade">
      <el-select v-model="formData.grade" placeholder="请选择年级">
        <el-option label="初一" value="初一"></el-option>
        <el-option label="初二" value="初二"></el-option>
        <el-option label="初三" value="初三"></el-option>
        <el-option label="高一" value="高一"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="科目" prop="subject">
      <el-select v-model="formData.subject" placeholder="请选择科目">
        <el-option label="数学" value="数学"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="版本" prop="version">
      <el-input v-model="formData.version" placeholder="请输入版本"></el-input>
    </el-form-item>
    <el-form-item label="省市" prop="provinceCity">
      <el-select v-model="formData.provinceCity" placeholder="请选择省市">
        <el-option label="安徽-合肥" value="安徽-合肥"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item style="text-align: right;">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </el-form-item>
  </el-form>
  </div>
</template>

<style scoped>
.edit-container {
  padding: 20px;
}
.edit-form {
  width: 50%;
  min-width: 400px;
}
</style>

<script setup>
import { ref, onMounted } from 'vue';
import { ArrowLeft } from '@element-plus/icons-vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

// 模拟数据
const textBookList = [
  { id: 1, name: '数学教材', grade: '初一', subject: '数学', version: '人教版', provinceCity: '安徽-合肥' },
  { id: 2, name: '代数教材', grade: '初二', subject: '数学', version: '北师大版', provinceCity: '安徽-合肥' }
];

// 路由和导航
const route = useRoute();
const router = useRouter();

// 表单引用
const formRef = ref(null);

// 表单数据
const formData = ref({});

// 表单规则
const rules = {
  name: [
    { required: true, message: '请输入教材名', trigger: 'blur' }
  ],
  grade: [
    { required: true, message: '请选择年级', trigger: 'change' }
  ],
  subject: [
    { required: true, message: '请选择科目', trigger: 'change' }
  ],
  version: [
    { required: true, message: '请输入版本', trigger: 'blur' }
  ],
  provinceCity: [
    { required: true, message: '请选择省市', trigger: 'change' }
  ]
};

// 初始化表单数据
onMounted(() => {
  const id = route.query.id;
  if (id) {
    // 编辑模式
    const book = textBookList.find(item => item.id === Number(id));
    if (book) {
      formData.value = { ...book };
    }
  } else {
    // 新增模式
    formData.value = {};
  }
});

// 返回列表页
const handleClose = () => {
  router.push('/textBookManage/index');
};

// 提交表单
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      if (formData.value.id) {
        // 编辑
        const index = textBookList.findIndex(item => item.id === formData.value.id);
        if (index !== -1) {
          textBookList[index] = { ...formData.value };
          ElMessage.success('编辑成功');
        }
      } else {
        // 新增
        formData.value.id = Date.now();
        textBookList.push(formData.value);
        ElMessage.success('新增成功');
      }
      router.push('/textBookManage/index');
    }
  });
};
</script>